import { useContext, useState } from "react";
import "./index.scss";
import classNames from "classnames";
import GoodsDetail from "../GoodsDetail";
import GoodsComment from "../GoodsComment";
import { GoodsContext } from "../../index";
function GoodsTabs() {
  const { goods } = useContext(GoodsContext);
  const [activeName, setActiveNames] = useState<string>("detail");
  const components: any = {
    detail: <GoodsDetail />,
    comment: <GoodsComment />,
  };
  const ComponentToRender = components[activeName];

  return (
    <div className="goods-tabs">
      <nav>
        <a
          className={classNames({ active: activeName === "detail" })}
          href="javascript:;"
          onClick={() => setActiveNames("detail")}
        >
          商品详情
        </a>
        <a
          className={classNames({ active: activeName === "comment" })}
          href="javascript:;"
          onClick={() => setActiveNames("comment")}
        >
          商品评价
          <span>
            ({goods?.commentCount > 0 ? goods.commentCount + "+" : 0})
          </span>
        </a>
      </nav>
      {/* 切换内容 */}
      {ComponentToRender}
    </div>
  );
}

export default GoodsTabs;
